// 实现这个项目的构建任务
//public文件，不需要被加工直接拷贝的文件
//src目录下的所有文件都会被构建
//sass,es6需要在构建过程中被编译
//图片&字体文件被压缩

const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del");

const browerSync = require("browser-sync");
const bs = browerSync.create();
const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const swig = require("gulp-swig");
const imagemin = require("gulp-imagemin");

const clean = () => {
  return del(["dist", "temp"]); //promise
};
const cwd = process.cwd();
let config = {};

try {
  const loadConfig = require(`${cwd}/page.config.js`);
  config = Object.assign({}, config, loadConfig);
} catch (err) {}
//scss
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true })); //把文件以流的方式往浏览器推
};
//js
const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
//scr下的html文件
const page = () => {
  return src("src/*/*.html", { base: "src", defaults: { cache: false } })
    .pipe(plugins.swig({ data: config.data }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// //src/layouts下的html文件
// const pageLay = () => {
//   return src("src/layouts/*.html", { base: "src" })
//     .pipe(plugins.swig({ data }))
//     .pipe(dest("temp"))
//     .pipe(bs.reload({ stream: true }));
// };
// //src/partials下的html文件
// const pagePartials = () => {
//   return src("src/partials/*.html", { base: "src" })
//     .pipe(plugins.swig({ data }))
//     .pipe(dest("temp"))
//     .pipe(bs.reload({ stream: true }));
// };
//图片
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("temp"));
};
//字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(imagemin())
    .pipe(dest("temp"));
};
//其他
const extra = () => {
  return src("piblic/**", { base: "public" }).pipe(dest("temp"));
};

//自动将构建注释中引用到的文件进行合并到一个文件中
const useref = () => {
  return (
    src("temp/*/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      //htm js css
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCss: true,
            minifyJs: true,
          })
        )
      )
      .pipe(dest("dist"))
  );
};
const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/**/*.html", page);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    serve: {
      notify: false,
      port: 8080,
      open: true,
      baseDir: ["temp", "src", "public"],
      files: "temp/**",
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};
const compile = parallel(style, script, page);
//上线之前执行的任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);
//开发阶段执行的任务
const develop = series(compile, serve);

module.exports = {
  clean,
  build,
  develop,
};
